$(function () {
    echarts_map();
    function echarts_map() {
        var myChart_map = echarts.init(document.getElementById('bigmap1'));
        //------------------------------------------------以下的变量为最终插入数据的变量------------------------------------------------------------
        //条形图x轴
        var xAxisBarChart = [];
        //条形图数据
        var dataBarChart = [];


        //标准间一周销量（7个数）
        var dataBrownies = [];
        //大床房一周销量（7个数）
        var dataMacarons = [];
        //双床房一周销量（7个数）
        var dataTiramisu = [];
        // 家庭房一周销量（7个数）
        var dataFamilyroom = [];
        // 情侣房一周销量（7个数）
        var dataCouplesroom = [];
        // 主题房一周销量（7个数）
        var dataThemedroom = [];
        // 蜜月房一周销量（7个数）
        var dataHoneymoonroom = [];

        //时间轴数据
        var timelineData = [];
        //数据插入图表
        var optionsData = [];

        //------------------------------------------------以下的变量为数据转换时的变量------------------------------------------------------------
        //极坐标轴显示星期几
        var weekDay = 0;
        //全数据数组
        var sourceArray = [];
        //判断是否排序
        var SortOrNot = false;
        //反序排序：从大到小
        var compare = function (x, y) {
            if (x.value < y.value) {
                return 1;
            } else if (x.value > y.value) {
                return -1;
            } else {
                return 0;
            }
        }
        //柱状图数据的映射集合，实现排序的转换
        var dataBarChartMap = new Map();
        //柱状图数据的寄存器，最后一步再导入到dataBarChart中
        var dataBarChartTemp = [];

        //图表加载
        option = {
            baseOption: {
                timeline: {
                    x: 0,
                    axisType: 'category',
                    orient: 'vertical',
                    autoPlay: true,
                    playInterval: 2000,
                    data: timelineData,
                    left: 0,
                    right: null,
                    top: 50,
                    bottom: 0,
                    width: 50,
                    height: null,
                    inverse: true,
                    symbol: 'none',
                    lineStyle: {
                        color: '#fff'
                    },
                    checkpointStyle: {
                        color: '#fff',
                        borderColor: '#777',
                        borderWidth: 1
                    },
                    label: {
                        normal: {
                            textStyle: {
                                color: '#F5994E',
                                fontSize: 10
                            }
                        },
                        emphasis: {
                            textStyle: {
                                color: '#fff',
                                fontSize: 15
                            }
                        }
                    },
                },
                title: {
                    text: '青云庭院酒店-本周各类房型销量',
                    textAlign: 'left',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    padding: 10,
                    backgroundColor: '#FFFFE0',
                    borderColor: '#777',
                    borderWidth: 1,
                    formatter: tooltipFormatter,

                },
                toolbox:{
                    feature: {
                        saveAsImage: { show: true, title: '保存为图片' },
                        dataView: { show: true, title: '数据视图' },
                        restore: { show: true, title: '重置' },
                        magicType: { show: true, type: ['line', 'bar'], title: { line: '切换为折线图', bar: '切换为柱状图' } },
                    },
                    top: '5px',
                    right: '10px',
                    iconStyle: { color: '#FFB980' },
                    emphasis: { iconStyle: { color: '#E5CF0D' } },
                },
                angleAxis: {
                    type: 'category',
                    data: [
                        {
                            value: '星期一',
                            textStyle: {
                                fontSize: 18,
                                color: 'red'
                            }
                        },
                        {
                            value: '星期二',
                            textStyle: {
                                color: 'white'
                            }
                        },
                        {
                            value: '星期三',
                            textStyle: {
                                color: 'white'
                            }
                        },
                        {
                            value: '星期四',
                            textStyle: {
                                color: 'white'
                            }
                        },
                        {
                            value: '星期五',
                            textStyle: {
                                color: 'white'
                            }
                        },
                        {
                            value: '星期六',
                            textStyle: {
                                color: 'white'
                            }
                        },
                        {
                            value: '星期日',
                            textStyle: {
                                color: 'white'
                            }
                        }
                    ],
                    z: 10
                },
                // 我写到了这里
                grid: {
                    left: '6%',
                    right: '5%',
                    top: '16%',
                    bottom: '3%',
                    containLabel: true
                },
                polar: {
                    center: ['60%', '30%'],
                    radius: 100,
                },
                xAxis: [{
                    type: 'category',
                    data: xAxisBarChart,
                    axisLabel: {
                        interval: 0,
                        color: '#fff' // 设置字的颜色为白色
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#fff' // 设置轴线的颜色为白色
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    max: 600,
                    show: false,
                }],
                radiusAxis: {},
                series: [{
                    type: 'bar',
                    data: dataBrownies,
                    coordinateSystem: 'polar',
                    name: '标准间',
                    center: ['60%', '30%'],
                    stack: 'a',
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#ffffff',
                        },
                        emphasis: {
                            borderWidth: 0,
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }, {
                    type: 'bar',
                    data: dataMacarons,
                    coordinateSystem: 'polar',
                    name: '大床房',
                    center: ['60%', '30%'],
                    stack: 'a',
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#ffffff',
                        },
                        emphasis: {
                            borderWidth: 0,
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }, {
                    type: 'bar',
                    data: dataTiramisu,
                    coordinateSystem: 'polar',
                    name: '双床房',
                    center: ['60%', '30%'],
                    stack: 'a',
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#ffffff',
                        },
                        emphasis: {
                            borderWidth: 3,
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                {
                    type: 'bar',
                    data: dataFamilyroom,
                    coordinateSystem: 'polar',
                    name: '家庭房',
                    center: ['60%', '30%'],
                    stack: 'a',
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#ffffff',
                        },
                        emphasis: {
                            borderWidth: 3,
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                {
                    type: 'bar',
                    data: dataCouplesroom,
                    coordinateSystem: 'polar',
                    name: '情侣房',
                    center: ['60%', '30%'],
                    stack: 'a',
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#ffffff',
                        },
                        emphasis: {
                            borderWidth: 3,
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                {
                    type: 'bar',
                    data: dataThemedroom,
                    coordinateSystem: 'polar',
                    name: '主题房',
                    center: ['60%', '30%'],
                    stack: 'a',
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#ffffff',
                        },
                        emphasis: {
                            borderWidth: 3,
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }, {
                    type: 'bar',
                    data: dataHoneymoonroom,
                    coordinateSystem: 'polar',
                    name: '蜜月房',
                    center: ['60%', '30%'],
                    stack: 'a',
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#ffffff',
                        },
                        emphasis: {
                            borderWidth: 3,
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                }, {
                    name: '每天销量',
                    type: 'pie',
                    center: ['60%', '30%'],
                    radius: ['45%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: true,
                            position: 'outside',
                            formatter: '{b} : {c} ({d}%)',
                            textStyle: { // 添加这一行代码来修改字体样式
                                fontSize: 12, // 设置字体大小
                                fontWeight: 'normal', // 设置字体粗细
                                color: '#ffffff' // 设置字体颜色
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '15',
                                fontWeight: 'normal',
                                color: '#ffffff'
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            padding: 10,
                            backgroundColor: '#fff',
                            borderColor: '#fff',
                            borderWidth: 1,
                            formatter: tooltipFormatter,

                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    legend: {
                        show: true,
                        orient: 'vertical',
                        x: 'left',
                        y: 'bottom',
                        data: ['标准间', '大床房', '双床房', '家庭房', '情侣房', '主题房', '蜜月房']
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 3,
                            borderColor: '#ffffff',
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '15',
                                fontWeight: 'normal'
                            }
                        }
                    }
                }, {
                    name: '半年销量',
                    type: 'bar',
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: true,
                            position: 'outside',
                            formatter: '{c}',
                            textStyle: {
                                color: '#fff',
                                fontSize: '12',
                            }

                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'normal'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#ffffff',
                            color: function (params) {
                                var colorList = [
                                    '#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80',
                                    '#8d98b3', '#e08fe0', '#b2d235', '#5d7092', '#f3d999',
                                    '#ff7c7c', '#87de75', '#b5c3d5', '#ffaa61', '#9678c8',
                                    '#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80',
                                    '#84e8d3', '#aaf487', '#fbc8d4', '#92a9dc', '#a7e6c4',
                                    '#2EC7C9', '#B6A2DE', '#5AB1EF', '#FFB980', '#D87A80',
                                    '#8D98B3', '#E08FE0', '#B2D235', '#5D7092', '#F3D999'
                                ];
                                return colorList[params.dataIndex]; // 根据数据索引返回对应的颜色
                            }
                        },
                        emphasis: {
                            borderWidth: 3,
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 10,
                            shadowColor: '#d87a80'
                        }
                    }
                }]
            },
            options: optionsData,
        }


        // 添加工具箱
        option.toolbox = {
            feature: {
                saveAsImage: { show: true, title: '保存为图片' },
                dataView: { show: true, title: '数据视图' },
                restore: { show: true, title: '重置' },
                magicType: { show: true, type: ['line', 'bar'], title: { line: '切换为折线图', bar: '切换为柱状图' } },
            },
            top: '-10px',
            right: '-10px',
            iconStyle: { color: 'rgba(255,255,255,.8)' },
            emphasis: { iconStyle: { color: 'rgba(255,255,255,1)' } },
        };
        


        //全数据计算
        for (var week = 0; week < 26; week++) {
            var weekDataArray = [];
            for (var day = 0; day < 7; day++) {
                var productSales = [{
                    'Brownies': parseInt(10 * Math.random()),
                    'Macarons': parseInt(10 * Math.random()),
                    'Tiramisu': parseInt(10 * Math.random()),
                    'Familyroom': parseInt(10 * Math.random()),
                    'Couplesroom': parseInt(10 * Math.random()),
                    'Themedroom': parseInt(10 * Math.random()),
                    'Honeymoonroom': parseInt(10 * Math.random())
                }];
                weekDataArray.push(productSales);
            }
            //一天的数据由3种蛋糕组成，一周由7天组成，半年由26周组成，所以写三个循环
            sourceArray.push(weekDataArray);
            timelineData.push('第' + (week + 1) + '周');
        }

        everyProductCalculate();
        //现实情况下大多数都是根据数据源对数据进行切割和合并
        function everyProductCalculate() {
            //数组容器重置
            dataBarChartMap = new Map();
            dataBarChartTemp = [];
            xAxisBarChart = [];
            dataBrownies = [];
            dataMacarons = [];
            dataTiramisu = [];
            dataFamilyroom = [];
            dataCouplesroom = [];
            dataThemedroom = [];
            dataHoneymoonroom = [];
            optionsData = [];

            //柱状图数据计算，就是一周合计的计算
            for (var i = 0; i < sourceArray.length; i++) {
                var weekSum = 0;
                for (var j = 0; j < sourceArray[i].length; j++) {
                    var daySum = 0;
                    daySum = sourceArray[i][j][0].Brownies +
                        sourceArray[i][j][0].Macarons +
                        sourceArray[i][j][0].Tiramisu +
                        sourceArray[i][j][0].Familyroom +
                        sourceArray[i][j][0].Couplesroom +
                        sourceArray[i][j][0].Themedroom +
                        sourceArray[i][j][0].Honeymoonroom;
                    weekSum = weekSum + daySum;
                }
                dataBarChartTemp.push(weekSum);
            }
            //数据插入到map集合中，由星期和每周销量相互对应
            for (var i = 1; i < sourceArray.length + 1; i++) {
                dataBarChartMap.put(i, dataBarChartTemp[i - 1]);

            }
            //是否排序
            if (SortOrNot) {
                dataBarChartMap.elements.sort(compare);
                dataBarChartTemp = dataBarChartMap.elements;
            }
            //得到dataBarChart，柱状图数据
            dataBarChart = dataBarChartTemp;
            for (var i = 0; i < sourceArray.length; i++) {
                var xAxisBarChartTemp = [];
                for (var j = 0; j < sourceArray.length; j++) {
                    if (i == dataBarChartMap.elements[j].key - 1) {
                        xAxisBarChartTemp.push('\n>第' + dataBarChartMap.elements[j].key + '周<');
                    } else {
                        xAxisBarChartTemp.push(dataBarChartMap.elements[j].key + '周');
                    }
                }
                //得到xAxisBarChart，柱状图x轴数据
                xAxisBarChart.push(xAxisBarChartTemp);
            }
            //
            //每个产品全部销量计算（一个产品包含7个值）
            for (var i = 0; i < sourceArray.length; i++) {
                dataBrowniesTemp = [];
                dataMacaronsTemp = [];
                dataTiramisuTemp = [];
                dataFamilyroomTemp = [];
                dataCouplesroomTemp = [];
                dataThemedroomTemp = [];
                dataHoneymoonroomTemp = [];

                for (var j = 0; j < sourceArray[i].length; j++) {
                    dataBrowniesTemp.push(sourceArray[i][j][0].Brownies);
                    dataMacaronsTemp.push(sourceArray[i][j][0].Macarons);
                    dataTiramisuTemp.push(sourceArray[i][j][0].Tiramisu);
                    dataFamilyroomTemp.push(sourceArray[i][j][0].Familyroom);
                    dataCouplesroomTemp.push(sourceArray[i][j][0].Couplesroom);
                    dataThemedroomTemp.push(sourceArray[i][j][0].Themedroom);
                    dataHoneymoonroomTemp.push(sourceArray[i][j][0].Honeymoonroom);
                }
                //得到蛋糕各自的数据
                dataBrownies.push(dataBrowniesTemp);
                dataMacarons.push(dataMacaronsTemp);
                dataTiramisu.push(dataTiramisuTemp);
                dataFamilyroom.push(dataFamilyroomTemp);
                dataCouplesroom.push(dataCouplesroomTemp);
                dataThemedroom.push(dataThemedroomTemp);
                dataHoneymoonroom.push(dataHoneymoonroomTemp);
            }
            for (var i = 0; i < sourceArray.length; i++) {
                optionsData.push({
                    'series': [{
                        'data': dataBrownies[i]
                    }, {
                        'data': dataMacarons[i]
                    }, {
                        'data': dataTiramisu[i]
                    }, {
                        'data': dataFamilyroom[i]
                    }, {
                        'data': dataCouplesroom[i]
                    }, {
                        'data': dataThemedroom[i]
                    }, {
                        'data': dataHoneymoonroom[i]
                    }, {
                        'data': [{
                            value: dataBrownies[i][weekDay],
                            name: '标准间'
                        }, {
                            value: dataMacarons[i][weekDay],
                            name: '大床房'
                        }, {
                            value: dataTiramisu[i][weekDay],
                            name: '双床房'
                        }, {
                            value: dataFamilyroom[i][weekDay],
                            name: '家庭房'
                        }, {
                            value: dataCouplesroom[i][weekDay],
                            name: '情侣房'
                        }, {
                            value: dataThemedroom[i][weekDay],
                            name: '主题房'
                        }, {
                            value: dataHoneymoonroom[i][weekDay],
                            name: '蜜月房'
                        }]
                    }, {
                        'data': dataBarChart
                    },

                    ],
                    'xAxis': [{
                        'data': xAxisBarChart[i],
                    }]
                });
            }
            option.options = optionsData;

            myChart_map.setOption(option);
        }







        myChart_map.on('click', function (params) {
            //直接改变数据的内容
            if (params.componentSubType != 'pie' &&
                params.seriesName != '半年销量') {
                weekDay = params.dataIndex;
                for (var i = 0; i < option.baseOption.timeline.data.length; i++) {
                    option.options[i].series[3].data[0].value = dataBrownies[i][weekDay];
                    option.options[i].series[3].data[1].value = dataMacarons[i][weekDay];
                    option.options[i].series[3].data[2].value = dataTiramisu[i][weekDay];
                    option.options[i].series[3].data[3].value = dataFamilyroom[i][weekDay];
                    option.options[i].series[3].data[4].value = dataCouplesroom[i][weekDay];
                    option.options[i].series[3].data[5].value = dataThemedroom[i][weekDay];
                    option.options[i].series[3].data[6].value = dataHoneymoonroom[i][weekDay];
                }
                var weekDayData = ['星期一', '星期二', '星期三', '星期四', '星期五',
                    '星期六', '星期日'
                ];
                weekDayData[weekDay] = {
                    value: weekDayData[weekDay],
                    textStyle: {
                        fontSize: 25,
                    }
                };
                option.baseOption.timeline.autoPlay = false;
                option.baseOption.angleAxis.data = weekDayData;
                myChart_map.setOption(option);
            }
            //重新执行数据转换过程
            else if (params.componentSubType == 'bar' &&
                params.seriesName == '半年销量') {
                if (SortOrNot == false) {
                    SortOrNot = true;
                } else {
                    SortOrNot = false;
                }
                everyProductCalculate();
                option.options = optionsData;
                myChart_map.setOption(option);
            }
        });
        //提示框体
        function tooltipFormatter(params) {
            var valuesFormatter = [];

            if (params.componentSubType == 'pie') {
                valuesFormatter.push(
                    '<div style="border-bottom: 1px solid #D8BFD8; font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
                    '本日销量' +
                    '<br>' +
                    '</div>' +
                    '<span style="color:' + params.color + '">' + params.name + '</span>: ' + params.value
                );
            } else {
                valuesFormatter.push(
                    '<div style="border-bottom: 1px solid #D8BFD8; font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
                    params.seriesName +
                    '</div>' +
                    '<span style="color:' + params.color + '">' +params.name +'</span>: ' +params.value + '<br>'
                );
            }

            return valuesFormatter.join(''); // 将数组转换为字符串
        }
        //map集合,这里应该写在工具脚本中
        function Map() {
            this.elements = new Array();

            // 获取Map元素个数
            this.size = function () {
                return this.elements.length;
            },

                // 判断Map是否为空
                this.isEmpty = function () {
                    return (this.elements.length < 1);
                },

                // 删除Map所有元素
                this.clear = function () {
                    this.elements = new Array();
                },

                // 向Map中增加元素（key, value)
                this.put = function (_key, _value) {
                    if (this.containsKey(_key) == true) {
                        if (this.containsValue(_value)) {
                            if (this.remove(_key) == true) {
                                this.elements.push({
                                    key: _key,
                                    value: _value
                                });
                            }
                        } else {
                            this.elements.push({
                                key: _key,
                                value: _value
                            });
                        }
                    } else {
                        this.elements.push({
                            key: _key,
                            value: _value
                        });
                    }
                },

                // 删除指定key的元素，成功返回true，失败返回false
                this.remove = function (_key) {
                    var bln = false;
                    try {
                        for (i = 0; i < this.elements.length; i++) {
                            if (this.elements[i].key == _key) {
                                this.elements.splice(i, 1);
                                return true;
                            }
                        }
                    } catch (e) {
                        bln = false;
                    }
                    return bln;
                },

                // 获取指定key的元素值value，失败返回null
                this.get = function (_key) {
                    try {
                        for (i = 0; i < this.elements.length; i++) {
                            if (this.elements[i].key == _key) {
                                return this.elements[i].value;
                            }
                        }
                    } catch (e) {
                        return null;
                    }
                },

                // 获取指定索引的元素（使用element.key，element.value获取key和value），失败返回null
                this.element = function (_index) {
                    if (_index < 0 || _index >= this.elements.length) {
                        return null;
                    }
                    return this.elements[_index];
                },

                // 判断Map中是否含有指定key的元素
                this.containsKey = function (_key) {
                    var bln = false;
                    try {
                        for (i = 0; i < this.elements.length; i++) {
                            if (this.elements[i].key == _key) {
                                bln = true;
                            }
                        }
                    } catch (e) {
                        bln = false;
                    }
                    return bln;
                },

                // 判断Map中是否含有指定value的元素
                this.containsValue = function (_value) {
                    var bln = false;
                    try {
                        for (i = 0; i < this.elements.length; i++) {
                            if (this.elements[i].value == _value) {
                                bln = true;
                            }
                        }
                    } catch (e) {
                        bln = false;
                    }
                    return bln;
                },

                // 获取Map中所有key的数组（array）
                this.keys = function () {
                    var arr = new Array();
                    for (i = 0; i < this.elements.length; i++) {
                        arr.push(this.elements[i].key);
                    }
                    return arr;
                },

                // 获取Map中所有value的数组（array）
                this.values = function () {
                    var arr = new Array();
                    for (i = 0; i < this.elements.length; i++) {
                        arr.push(this.elements[i].value);
                    }
                    return arr;
                };
        }

        myChart_map.setOption(option);

        window.addEventListener("resize", function () {
            myChart_map.resize();
        });

    }
})